<template>
  <div>
    <ul>
      <li
        v-for="(item,index) in arr"
        :key="index"
      >
        {{ item }}
      </li>
    </ul>
    <button @click="reverseBtn">reverse()翻转数组</button>
    <button @click="pushBtn">push()追加一个数据</button>
    <button @click="sliceBtn">slice()提取数据</button>
    <button @click="updateOne">修改第一项数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["刘备", "关羽", "张飞", "赵云"],
    };
  },
  methods: {
    reverseBtn() {
      // .reverse() 操作了原数组，会影响页面的更新
      this.arr.reverse();
    },
    pushBtn() {
      this.arr.push("孙尚香");
    },
    sliceBtn() {
      const res = this.arr.slice(0, 2);
      // console.log(res);
      this.arr = res;
    },
    updateOne() {
      // Vue主要是对改变数组的方法封装了更新检测
      //   直接通过索引修改，页面无法更新
      // this.arr[0] = "带头大哥";

      // 可以通过 this.$set() 修改索引的某一项
      // this.$set(this.arr, 0, '带头大哥')

      // splice 修改一个怎么写？
      //    .splice 删除一个，再添加回来即可
      this.arr.splice(0, 1, "带头大哥666");
    },
  },
};
</script>

<style>
</style>